<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript"	src="${ctx}/resources/js/datatable-query.js"></script>


<script>
$(document).ready(function(){
	$("form.form-horizontal.seperator[method='post']").validate();
	
});
	
	
 </script>
<div class="row-fluid">

	<div class="span12">

		<div class="page-header">
			<h4>Parameter Group </h4>
		</div>

<form class="form-horizontal seperator" method="post">
<!--name --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="name">Name :</label><input class="span4" id="name" name="name"   type="text" value="${entity.name}" /></div></div></div>
<!--description --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="description">Description :</label><input class="span4" id="description" name="description"   type="text" value="${entity.description}" /></div></div></div>


 <div class="form-row row-fluid">
				<div class="span12">
					<div class="row-fluid">
						<div class="form-actions">
							<div class="span3"></div>
							<div class="span4 controls">
								<button type="submit" class="btn btn-info marginR10">Save
									changes</button>
								<button class="btn btn-danger">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>

	</div>
	<!-- End .span12 -->

</div>
<!-- End .row-fluid --> 

 <div class="row-fluid">
	<div class="span12">
	<div class="box gradient">
	 
		<div class="title">
				<h4>
				<span>Parameter </span> <span class="box-form right"> </span>
				
				<span class="box-form right parameter_bar"><a href="#" class="btn btn-mini addParameter">Add Parameter</a></span>
 				</h4>
 				<a href="#" class="minimize"> </a>
			</div>
		 <div class="content scrollable clearfix">
		<table class="table table-bordered table-vertical-centre parameterTable">
			<thead>
				<tr>
					<th><a class="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
<th>Key </th>
<th>Value </th>

 					<th>Action</th>
				</tr>
			</thead>
		</table>
		</div>
	 
</div>
 </div>
 </div>





<script>
 
 

$(document).ready(function(){
	var del = {
			id : 'parameterDel',
			text  : 'Del',
			domain : "Parameter",
			operation : "Del",
			url : "${ctx}/admin/parameter/del/",
			selector : ".parameter_bar",
			selects  : $('.parameterTable'),
	  
	};
	johnny.tableBtn(del);
	
 	
	
	$('.addParameter').click(function(){
	$("#parameterDiv").find("div.modal-body").find("input,select,textarea,checkbox").not("[name=action],[type=hidden]").not("[type=radio]").each(function(step,value){
										if($(this).is("select")){
											var d = $(value).find("option:first").val();
											$(this).val(d);
										}else{
		 									$(value).val("");
										}
										if(!$(value).hasClass("nostyle")){
											$(value).uniform();
										}
	 							});
	
	
	
	 $("#parameterDiv input[name='action']").val("${ctx}/admin/parameter/create/");
 	 $("#parameterDiv").modal('show');
  });
	
	  $(document).delegate('.parameterTable .icomoon-icon-pencil', 'click', function(event) {
		  
		  	var id = $(this).parent().attr("dataid");
			$.ajax({
				url : "${ctx}/admin/parameter/"+id+"/edit/",
				type : "GET",
				dataType : "json",
				success : function(data){		
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						johnny.error(data.message);
						return;
					}else{
							var entity = data.entity;
							
							
							
 							$("#parameterDiv").find("div.modal-body").find("input[name],select[name],textarea[name],checkbox[name]").not("[name=action],[type=hidden]").each(function(step,value){
									var name = $(value).attr("name");
									if ($(value).is(':radio')) {
										if (""+entity[name] ===""+$(value).val()){
  												$(value).attr("checked","checked");
   											}else{
   												$(value).removeAttr("checked");
 																			
 											}
								 		var css =  $(":checkbox[fname="+name+"]");
										if (css.length>0){
											if ("true" === ""+entity[name]){
												if (!css.attr("checked")){
													css.siblings("label").trigger('mousedown')
									                  .trigger('mouseup')
									                  .trigger('click');
												}
											}else{
												if (css.attr("checked")){
													css.siblings("label").trigger('mousedown')
									                  .trigger('mouseup')
									                  .trigger('click');
												}

												
												
											}
										}
										
									}else{
 									if (entity[name]|| entity[name]===0){
										$(value).val(entity[name]);
 										if ($(value).hasClass("nostyle")){}else{$(value).uniform();}
 									}else if (name.match(/Id$/)){
										var pro = name.substring(0,name.length-2);
										if (entity[pro] &&entity[pro].id){
											$(value).val(entity[pro].id);
	 										if ($(value).hasClass("nostyle")){}else{$(value).uniform();}
 										}
 									
									}
									else{
 										$(value).val("");
									}}
								
							});
							
							var x = $("#parameterDiv").find("div.modal-body").find('input[type="radio"]').not('.nostyle').uniform();
   							$("#parameterDiv input[name='action']").val("${ctx}/admin/parameter/"+id+"/edit/");
     	    				$("#parameterDiv").modal('show');
 					}
				}
			});		  
 
	     
	    });
	var recordColumn = ['','key','value','parameterGroup'];
	
	 $('.parameterTable').dataTable({
		"bLengthChange" : true,
		"aoColumnDefs" : [ {
			'bSortable' : false,
			'aTargets' : [0,3 ]
		} ],
 		"sAjaxSource" : '${ctx}/admin/parameter/${entity.id}/',
		"createQueryData" : function (aoData){
				return	johnny.initQueryData(aoData, recordColumn);
		},
		"createResult" : function (json, echo){
 			var dataArray = new Array();
			for ( var i = 0; i < json.result.length; i++) {
				var subArray = new Array();
				var value = johnny.getForSelect(json.result[i].id);
				subArray.push(value);
subArray.push(json.result[i].key)
subArray.push(json.result[i].value)

   				var conf = [{
					link : 'javascript:void(1)',
					dataId : json.result[i].id,
					text : 'edit',
					css  : 'icomoon-icon-pencil'
				}
   				<c:if test="${fn:length(languages) gt 1}">
   				,{
					link : 'javascript:void(1)',
					dataId : json.result[i].id,
					text : 'Language',
					css  : 'icomoon-icon-eyedropper edit-language'
				}
   				</c:if>
				
				];
				subArray.push(johnny.getGridLink(conf)); 
  				dataArray.push(subArray);
			}
			return {
				sEcho : echo,
				iTotalRecords : json.totalCount,
				iTotalDisplayRecords : json.totalCount,
				aaData : dataArray
			};
		}		
	});
	 
	
	
	
	
});


</script>





<div id="parameterDiv" class="modal hide fade"  selector=".parameterTable" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>	Parameter  </h3>
	</div>
 
	<div class="modal-body">
  						<input type="hidden" name="action" >
  						<input type="hidden" name="parameterGroupLd" value="${entity.id}">
<!--key --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="key">Key :</label><input class="span9" id="key" name="key"   type="text" value="" /></div></div></div>
<!--value --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="value">Value :</label><input class="span9" id="value" name="value"   type="text" value="" /></div></div></div>
	</div>
	 
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" class="btn btn-primary modal-submit">Save changes</a>
	</div>

</div>
<c:if test="${fn:length(languages) gt 1}">
<script>

$(document).ready(function(){
	$('#confirmLanguage')
	.click(
			function() {
				var menuId = $('#menuId').val();
				var ids = new Array();
				var values = new Array();
				$('.language').each(function() {
									var val = $(this).val();
									if (val) {
										ids.push($(this).attr('name'));
										values.push(val);
									}
								});
				var url = "${ctx}/admin/parameter/"
						+ menuId + "/language/";
				$
						.ajax({
							url : url,
							type : "POST",
							data : {
								'ids' : ids,
								'values' : values
							},
							dataType : "json",
							success : function(data) {
								if (data
										&& data.state
										&& (data.state
												.indexOf("ERROR") != -1)) {
									johnny
											.error(data.message);
									return;
								} else {
									$("#languages")
											.modal(
													'hide');
									johnny
											.info("modify parameter  language successfully");
								}
							}
						});

			});


	
	
	
	
});


$(document).delegate(".edit-language","click",function(){
	var dataid =  $(this).parents("a:first").attr("dataid");
	showLanguage(dataid);
});



function showLanguage(id) {
	$("#menuId").val(id);
	$.ajax({
		url : "${ctx}" + "/admin/parameter/" + id + "/language/",
		type : "GET",
		dataType : "json",
		success : function(data) {
			if (data && data.state && (data.state.indexOf("ERROR") != -1)) {
				johnny.success(data.message);
				return;
			} else {
				$('.language').each(function() {
					var val = $(this).val('');
				});
				$.each(data.entity, function(val, index) {
					$('#lg-' + this.language.lg).val(this.name);
				});
				$("#languages").modal('show');
			}
		}
	});

}
</script>




<c:set var="allLanguage" value="${requestScope.languages}" />
	<div id="languages" class="modal hide fade" style="display: none;">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">
				<span class="icon12 minia-icon-close"></span>
			</button>
			<h3>Language setting</h3>
		</div>
		<div class="modal-body">
			<form method="post" id="menuForm">
				<input type="hidden" id="menuId" name="menuId">
				<c:forEach var="entity" items="${allLanguage}">
					<div class="form-row row-fluid">
						<label class="form-label span4">${entity.language}</label> <input
							id="lg-${entity.lg}" class="span8 language" name="${entity.id}" />
					</div>
				</c:forEach>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
				id="confirmLanguage" class="btn btn-primary">Save changes</a>
		</div>
	</div>
</c:if>


